<!--  -->
<template>
  <div class="distributionBasket">
    <el-button type="primary" @click="editadd()">新增路线</el-button>
    <div class="distributionTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="线路名称" width="auto"></el-table-column>
        <el-table-column prop="deliverName" label="配送员" width="auto"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="auto"></el-table-column>
        <el-table-column prop="places" label="场地明细" width="auto"></el-table-column>
        <el-table-column label="操作" width="180px;" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增弹出层 -->
      <el-dialog title="编辑/新增" :visible.sync="dialogFormVisible" width="54%">
        <el-form :model="form" :inline="true" ref="form">
          <el-form-item label="配送路线" prop="name">
            <el-input v-model="form.name" placeholder="配送路线"></el-input>
          </el-form-item>
          <el-form-item label="配送员" prop="deliverId">
            <el-select v-model="form.deliverName" @change="handeldeliverId" placeholder="请选择">
              <el-option
                v-for="item in deliverIds"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="场地名称" prop="placeIds">
            <el-transfer
              v-model="form.placeIds"
              :props="{ key: 'value', label: 'label' }"
              :titles="['未选择', '已选择']"
              :button-texts="['取消选择', '选择']"
              @change="handleChange"
              :data="noData"
            ></el-transfer>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addcomfirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import {
  pathList,
  pathSave,
  pathQueryplace,
  deliverList,
  pathdelete
} from "@/api/distribution";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      noData: [],
      valMenu: "",
      dialogFormVisible: false,
      value: "",
      form: {
        deliverId: "",
        name: "",
        placeIds: []
      },
      // placeIds: [],
      tableData: [],
      deliverIds: []
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    handeldeliverId(val) {
      this.form.deliverId = val;
    },
    handleChange(value, direction, movedKeys) {
      this.form.placeIds = value;
      // console.log(this.placeIds)
    },
    // 新增编辑弹框
    editadd() {
      this.dialogFormVisible = true;
      this.pathQueryplace();
      this.deliverList();
    },
    // 编辑弹框显示
    handleEdit(obj) {
      console.log(obj);
      this.dialogFormVisible = true;
      this.form = obj;
      this.pathQueryplace();
      this.deliverList();
    },
    // 新增编辑确定发送数据
    addcomfirm() {
      pathSave(this.form).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          this.pathList();
          this.form = {};
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //删除路线
    handleDelete(id) {
      console.log(id);
      this.$confirm("此操作将删除该线路, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          pathdelete(id).then(res => {
            if (res.code === 20000) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.pathList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //查询场地
    pathQueryplace() {
      pathQueryplace().then(res => {
        console.log(res);
        this.noData = res.rows;
      });
    },
    // 查询配送员列表
    deliverList() {
      deliverList().then(res => {
        console.log(res);
        var arr = [];
        arr = res.rows.map((i, v) => {
          return { value: i.id, label: i.name };
        });
        this.deliverIds = arr;
      });
    },
    //配送线路列表
    pathList() {
      pathList().then(res => {
        console.log(res);
        this.tableData = res.rows;
      });
    }
  },

  //生命周期 - 组件实例刚被创建
  beforeCreate() {},
  //创建完成 访问当前this实例
  mounted() {
    this.pathList();
  }
};
</script>
<style lang="scss" scoped>
.distributionBasket {
  padding: 20px;
  .distributionTable {
    margin-top: 20px;
  }
}
</style>
